<template>
	<view class="page-container">
		<!-- 主内容区 -->
		<view class="main-content">
			<!-- 轮播图区域 -->
			<view class="carousel-container">
				<u-swiper :list="carouselList" keyName="imgUrl" indicator indicatorMode="line" circular></u-swiper>
			</view>
			<u-sticky>
				<!-- 主要功能区 -->
				<view class="functions-container">
					<view class="functions-grid">
						<view class="function-item" @click="goCollectionOfBills">
							<view class="function-icon bg-primary-light">
								<u-icon name="grid" color="#1677ff" size="36"></u-icon>
							</view>
							<text class="function-name">票据归集</text>
						</view>

						<view class="function-item" @click="goReimbursement">
							<view class="function-icon bg-accent-light">
								<u-icon name="red-packet" color="#ff7d00" size="36"></u-icon>
							</view>
							<text class="function-name">票据报销</text>
						</view>

						<view class="function-item">
							<view class="function-icon bg-success-light" @click="goBillingEntity">
								<u-icon name="coupon" color="#52c41a" size="36"></u-icon>
							</view> 
							<text class="function-name">我的票据</text>
						</view>

						<view class="function-item" @click="goExpense">
							<view class="function-icon bg-block-light">
								<u-icon name="lock" color="#fa3534" size="36"></u-icon>
							</view>
							<text class="function-name">我的授权</text>
						</view>
					</view>
				</view>
			</u-sticky>
			<!-- 最近财政票据 -->
			<view class="receipts-container">
				<view class="receipts-header">
					<text class="receipts-title">最近财政票据</text>
					<view class="view-all" @click="goTicket">
						<text>查看全部</text>
						<u-icon name="arrow-right" color="#1677ff" size="16"></u-icon>
					</view>
				</view>
				<!-- 票据列表 -->
				<view v-if="receipts.length>0" class="ticket-list">
					<!-- 票据卡片 -->
					<view class="ticket-card" @click="navigateToDetail(receipt)" v-for="(receipt, index) in receipts"
						:key="index">
						<view class="ticket-header">
							<u-icon size="20" name="/static/assets/logoIcon.png"></u-icon>
							<view class="ticket-info">
								<text class="patient-name">{{receipt.agencyName}}</text>
							</view>
							<text class="amount">¥ {{receipt.totalAmount}}</text>
						</view>

						<view class="ticket-details">
							<view class="detail-position">
								<text class="label"></text>
								<view class="status">
									<view class="status-dot"
										:style="{backgroundColor:receipt.status==1?'#4070ff':(receipt.status==8?'#44d794':( receipt.status==9?'#fe4040':''))}">
									</view>
									<text class="status-text"
										:style="{color:receipt.status==1?'#4070ff':(receipt.status==8?'#44d794':( receipt.status==9?'#fe4040':''))}">
										{{receipt.status==1?'正常票据':(receipt.status==8?'已换开':( receipt.status==9?'已作废':''))}}
									</text>
								</view>
							</view>
							<view class="detail-item">
								<text class="label">票据号码:</text>
								<text class="value">{{receipt.einvoiceNumber}}</text>
							</view>
							<!-- <view class="detail-item">
							<text class="label">票据代码:</text>
							<text class="value">{{receipt.einvoiceCode}}</text>
						</view> -->
							<view class="detail-item">
								<text class="label">交 款 人:</text>
								<text class="value">{{receipt.payerName}}</text>
							</view>
							<view class="detail-item">
								<text class="label">票据种类:</text>
								<text class="value">{{receipt.billType}}</text>
							</view>

						</view>

						<view class="ticket-remark">
							<text class="remark-label"><text v-if="receipt.remark">备注:</text>{{receipt.remark||''}}</text>
							<text class="remark-date">{{receipt.issueDate}}</text>
						</view>
					</view>
				</view>
				<view v-else class="emptyBg">
					<u-image src="/static/assets/empty.png" height="300px" mode="aspectFit"></u-image>
				</view>
			</view>
		</view>
		<view v-if="result == 9000" class="blackView">
			<text class="blackText">登录后可查看您的票据</text>
			<view class="loginBtn" @click="login">
				<text class="loginText">登录/注册</text>
			</view>
		</view>
		<u-modal ref="editModal" title="提示" :show="showEditModal" :mask-close-able="false" :showCancelButton='true'
			 @cancel='showEditModal=false' @confirm="confirm" :close-on-click-modal="false">
			 <text>账号未完善，部分功能不可用，是否去完善?</text>
		</u-modal>
	</view>
</template>

<script>
	import {
		postEinvoiceIndex
	} from '@/api/homeApi.js'
	export default {
		data() {
			return {
				isIdentification:0,
				showEditModal:false,
				result: 9000,
				currentTab: 0,
				carouselList: [{
						imgUrl: 'https://picsum.photos/id/20/800/400',
						title: '财政票据电子化管理新规，10月起全面实施'
					},
					{
						imgUrl: 'https://picsum.photos/id/26/800/400',
						title: '财政票据真伪查询教程，点击了解'
					},
					{
						imgUrl: 'https://picsum.photos/id/48/800/400',
						title: '季度末财政票据报销截止提醒，避免逾期'
					}
				],
				receipts: [
					// {
					// 	agencyName: '石家庄市第一人民医院',
					// 	type: '门诊收费',
					// 	totalAmount: '680.00',
					// 	einvoiceCode: '110000130022',
					// 	einvoiceNumber: '00056789',
					// 	payerName: '张小明',
					// 	billType: '医疗收费票据（电子）'
					// },
				]
			};
		},
		onShow() {
			this.postEinvoiceIndexFun()
		},
		created() {
			this.isIdentification = uni.getStorageSync('isIdentification')
		},
		methods: {
			goReimbursement(){
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				if(this.isIdentification == 0){
					this.showEditModal = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/home/billReimbursement'
				})
			},
			goCollectionOfBills(){
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				uni.navigateTo({
					url: '/pages/home/collectionOfBills'
				})
			},
			goExpense(){
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				if(this.isIdentification == 0){
					this.showEditModal = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/expense/expense'
				})
			},
			goTicket(){
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				uni.navigateTo({
					url: '/pages/ticket/ticket'
				})
			},
			goBillingEntity(){
				if(this.result==9000){
					return this.$u.toast('请登录');
				}
				uni.navigateTo({
					url: '/pages/ticket/billingEntity'
				})
			},
			async confirm() {
				uni.navigateTo({
					url: `/pages/login/login?stepNum=2&telephone=${uni.getStorageSync('account')}`
				})
				this.showEditModal = false;
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handleSwipeChange(index) {
				// 轮播图切换回调
			},
			handleTabChange(index) {
				this.currentTab = index;
			},
			navigateToDetail(receipt) {
				// 跳转到票据详情页
				uni.navigateTo({
					url: '/pages/home/billdetail?item=' + encodeURIComponent(JSON.stringify(receipt))
				})
			},
			async postEinvoiceIndexFun() {
				uni.showLoading({
					title: '加载中'
				})
				try {
					const res = await postEinvoiceIndex()
					this.result = res.result
					if (res.result == 0) {
						this.receipts = res.einvoiceList
						console.log('===', this.receipts)
						uni.hideLoading()
					} else {
						this.receipts=[]
						this.$u.toast(res.message || '接口错误');
						uni.hideLoading()
					}
				} catch (error) {
					uni.hideLoading()
					this.$u.toast(error.message || '接口错误');
				}
			},
		}
	};
</script>

<style scoped>
	.blackView {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 100rpx;
		background: rgba(0, 0, 0, 0.78);
		/*opacity:0.78;*/
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.blackText {
		margin-left: 36rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		flex-direction: row;
		flex: 1;
	}

	.loginBtn {
		width: 172rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #3765FF;
		border-radius: 28rpx;
		margin-right: 30rpx;
	}

	.loginText {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.page-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.main-content {
		flex: 1;
		/* padding-bottom: 50px; */
		/* 为底部导航留出空间 */
	}

	/* 轮播图样式 */
	.carousel-container {
		width: 100%;
		position: relative;
	}

	.carousel-item {
		position: relative;
		width: 100%;
		height: 160px;
	}

	.carousel-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.carousel-desc {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px;
		color: #ffffff;
		font-size: 14px;
		font-weight: 500;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
	}

	/* 功能区样式 */
	.functions-container {
		padding: 20px 16px;
	}

	.functions-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.function-icon {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	.function-name {
		font-size: 12px;
		color: #333333;
		text-align: center;
	}

	/* 票据列表样式 */
	.receipts-container {}

	.receipts-header {
		padding: 0 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin-bottom: 12px; */
		/* padding-top: 8px; */
	}

	.receipts-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.view-all {
		display: flex;
		align-items: center;
		color: #1677ff;
		font-size: 14px;
	}

	.receipts-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.emptyBg {
		display: flex;
		justify-content: center;
	}

	.receipt-item {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.receipt-item:active {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	}

	.receipt-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.receipt-company {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.receipt-type {
		display: block;
		font-size: 12px;
		color: #8c8c8c;
		margin-top: 4px;
	}

	.receipt-amount {
		font-size: 18px;
		font-weight: bold;
		color: #ff4d4f;
		text-align: right;
	}

	.receipt-details {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px 16px;
		padding-top: 12px;
		border-top: 1px solid #f5f5f5;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}

	.detail-label {
		width: 180rpx;
		color: #8c8c8c;
	}

	.detail-value {
		font-weight: 500;
		color: #333333;
	}

	/* 颜色定义 */
	.bg-primary-light {
		background-color: rgba(22, 119, 255, 0.1);
	}

	.bg-accent-light {
		background-color: rgba(255, 125, 0, 0.1);
	}

	.bg-success-light {
		background-color: rgba(82, 196, 26, 0.1);
	}
	.bg-block-light{
		background-color: rgba(250, 53, 52, 0.1);
	}
	/* 票据列表 */
	.ticket-list {
		padding-bottom: 20rpx;
	}

	/* 票据卡片 */
	.ticket-card {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.ticket-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.ticket-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #4285f4;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 40rpx;
	}

	.ticket-info {
		margin-left: 10rpx;
		flex: 1;
	}

	.patient-name {
		color: #333;
		font-size: 32rpx;
		width: 410rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}

	.amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #e53935;
	}

	/* 票据详情 */
	.ticket-details {
		position: relative;
		margin-bottom: 30rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.detail-position {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.label {
		color: #666;
		font-size: 28rpx;
		width: 130rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		margin-left: 20rpx;
		/* text-align: right; */
		flex: 1;
	}

	.status {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.status-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: #4caf50;
		border-radius: 50%;
	}

	.status-text {
		color: #4caf50;
		font-size: 28rpx;
	}

	/* 票据备注 */
	.ticket-remark {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1px solid #eee;
		color: #666;
		font-size: 28rpx;
	}

	.remark-label {
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}
</style>